<template>
    <div id="lineChart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'lineChart',
    data() {
        return {
            lineChart: null,
            timeData: [],
        }
    },
    mounted() {
        this.getTimeData();
        this.initChart();
        // 图表自适应
        window.addEventListener('resize', () => {
            this.lineChart.resize();
        })
    },
    methods: {
        getTimeData() {
            const timeData = [];
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;

            for (let i = 0; i < 5; i++) {
                timeData.push(`${year}-${month - i}`);
            }
            this.timeData = timeData.reverse();
        },
        initChart() {
            this.lineChart = echarts.init(document.getElementById('lineChart'));
            if (!this.lineChart) return;

            const option = {
                backgroundColor: "#080b30",
                legend: {
                    show: true,
                    x: "center",
                    top: "12%",
                    y: "35",
                    icon: "stack",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "#1bb4f6",
                    },
                    data: ["新增用户", "绑定手机"],
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 255, 233,0)",
                                    },
                                    {
                                        offset: 0.5,
                                        color: "rgba(255, 255, 255,1)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 255, 233,0)",
                                    },
                                ],
                                global: false,
                            },
                        },
                    },
                },
                grid: {
                    top: "5%",
                    left: "5%",
                    right: "5%",
                    bottom: "2%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        splitArea: {
                            color: "#f00",
                            lineStyle: {
                                color: "#f00",
                            },
                        },
                        axisLabel: {
                            color: "#fff",
                        },
                        splitLine: {
                            show: false,
                        },
                        boundaryGap: false,
                        data: this.timeData
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        splitNumber: 4,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,0.1)",
                            },
                        },
                        axisLabel: {
                            show: false,
                            marginRight: 10,
                            textStyle: {
                                color: "#d1e6eb",
                            },
                        },
                        axisTick: {
                            show: false,
                        }
                    },
                ],
                series: [
                    {
                        name: "注册总量",
                        type: "line",
                        smooth: true, //是否平滑
                        showAllSymbol: true,
                        symbol: "circle",
                        symbolSize: 10,
                        lineStyle: {
                            normal: {
                                color: "#6c50f3",
                                shadowColor: "rgba(0, 0, 0, .3)",
                                shadowBlur: 0,
                                shadowOffsetY: 5,
                                shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#6c50f3",
                            },
                        },
                        itemStyle: {
                            color: "#6c50f3",
                            borderColor: "#fff",
                            borderWidth: 2,
                            shadowColor: "rgba(0, 0, 0, .3)",
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(108,80,243,0.3)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(108,80,243,0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(108,80,243, 0.9)",
                                shadowBlur: 20,
                            },
                        },
                        data: [502, 205, 332, 281, 398, 214],

                    },
                    {
                        name: "绑定手机号",
                        type: "line",
                        smooth: true, //是否平滑
                        showAllSymbol: true,
                        symbol: "diamond",
                        symbolSize: 10,
                        lineStyle: {
                            normal: {
                                color: "#00ca95",
                                shadowColor: "rgba(0, 0, 0, .3)",
                                shadowBlur: 0,
                                shadowOffsetY: 5,
                                shadowOffsetX: 5,
                            },
                        },
                        label: {
                            show: true,
                            position: "top",
                            textStyle: {
                                color: "#00ca95",
                            },
                        },
                        itemStyle: {
                            color: "#00ca95",
                            borderColor: "#fff",
                            borderWidth: 2,
                            shadowColor: "rgba(0, 0, 0, .3)",
                            shadowBlur: 0,
                            shadowOffsetY: 2,
                            shadowOffsetX: 2,
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0,202,149,0.3)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(0,202,149,0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0,202,149, 0.9)",
                                shadowBlur: 20,
                            },
                        },
                        data: [281, 398, 214, 179, 289, 356],
                    },
                ],
            }
            this.lineChart.setOption(option);
        }
    },
    beforeDestroy() {
        this.lineChart.dispose();
        window.removeEventListener('resize', () => {
            this.lineChart.resize();
        })
    }
}
</script>

<style scoped>
#lineChart {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}
</style>